
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<span style="font-size:18px;">
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="approvalProcess/css/bootstrap.min.css" />
    <script type="text/javascript" src="approvalProcess/js/jquery.min.js"></script>
    <script type="text/javascript" src="approvalProcess/js/jquery.cookie.js"></script>
    <script type="text/javascript" src="approvalProcess/js/overall.js"></script>

    <title>登录</title>
</head>
<body>

<div style="background-image: url(approvalProcess/img/loginbgk.jpg); width: 100%; height: 100%;
    background-size:cover;" >

    <div class="container" >
        <div class="col-md-4"></div>

        <div class="col-md-5" style="background-color:#eee;;margin-top:200px; ">

            <div class="row"  >
                <div class="text-center ">
                    <h3>校园出入资格审核系统</h3>
                </div>
            </div>

            <div style="padding: 30px;">

                <div class="form-group">
                    <label >用户名:&nbsp; &nbsp; <span id="uname" style="font-size:10px; color: red"></span></label>
                    <input type="text" id="user_name" placeholder="请输入账号" class="form-control" style="color:black;">
                </div>

                <div class="form-group">
                    <label >密码&nbsp; &nbsp; <span id="upawd" style="font-size:10px; color: red"></span></label>
                    <div class="form-inline">
                        <input type="password" id="user_password"  placeholder="请输入密码" class="form-control" style="color:black; width: 320px;">
                        <a href="javascript:void(0);" data-toggle="dropdown" data-hover="dropdown"><img id="show_hide" onclick="hideShowPsw()" src="approvalProcess/img/hide_paswd.png" width="20px" height="20px"/></a>
                    </div>
                </div>

                <div class="form-group">
                     <label >验证码:&ensp;</label><span id="ver_code" style="font-size:10px; color: red;"></span>
                    <div class="form-inline">
                        <input type="text" placeholder="（不区分大小写）" id="veri_code" style="width: 230px;" class="form-control" maxlength="6">
                        <a href="javascript:void(0);"><canvas id="canvas" width="100px" height="30px"></canvas></a>
                    </div>
                </div>


                 <div class="form-group" >
                     <div class="form-inline" >
                         <div style="float: left; margin-left: 20px; margin-bottom: 10px;" class="checkbox">
                            <label>
                                <input type="checkbox" name="remeber">记住密码
                            </label>
                        </div>

                            <div style="float: right; margin-right: 20px; margin-bottom: 10px;">
                                <a href="${pageContext.request.contextPath}/forgetPassword" style="color: #0f0f0f">忘记密码？</a>
                            </div>
                     </div>
                 </div>

                <div class="form-group">
                    <input type="button" value="登陆" class="btn btn-success form-control" onclick="initDate()">
                </div>

                <div style="margin-top: 10px;" class="text-center">
                    <span id="user_messge" style="font-size:10px; color: red;"></span>
                </div>

            </div>

        </div>
        <div class="col-md-4"></div>
    </div>

</div>

<script type="text/javascript">
    var names = $.cookie("name");
    var pawds = $.cookie("pawd");
    if (names != null && pawds != null){
        $("#user_name").val(names);
        $("#user_password").val(pawds);
        initDate();
    }else if (names != null){
        $("#user_name").val(names);
    }


    $(document).keyup(function(event){
        if(event.keyCode === 13){
            initDate();
        }
    });

    //验证码的显示
    var show_num = [];
    draw(show_num);
    //点击更换验证码
    $("#canvas").on('click',function(){
        draw(show_num);
        $("#ver_code").text("");
    })

    function initDate(){
        var uname = $("#user_name").val();
        var upawd = $("#user_password").val();
        var veriCode = $("#veri_code").val();

        if($.isEmptyObject(uname)){
            $("#uname").text("请输入用户名");
            return;
        }else {
            $("#uname").text("");
        }
        if($.isEmptyObject(upawd)){
            $("#upawd").text("请输入密码");
            return;
        }else {
            $("#upawd").text("");
        }

        if (pawds == null){
            if($.isEmptyObject(veriCode)){
                $("#ver_code").text("验证码为空");
                return;
            }else {
                $("#ver_code").text("");
            }

            var num = show_num.join("");
            if(veriCode.toLowerCase() !== num.toLowerCase()){
                $("#ver_code").text("验证码错误");
                draw(show_num);
                return;
            }
        }


        //网络请求URL地址
        var postUrl = "${pageContext.request.contextPath}/userLogin";
        //将用户账号和密码包装成json数据
        var str = {
            "userLoginName": uname,
            "userLoginPwd": upawd
        };

        $.ajax({
            type:"post",
            url:postUrl,
            headers: {
                "Content-Type":"application/json"
            },
            data:JSON.stringify(str),
            contentType: "application/json; charset=utf-8",
            dataType:"json",
            success:function(data){
                //登录失败，提示用户失败原因
                if (data.status == "0"){
                    if ("用户名不存在" === data.msg){
                        $("#uname").text("用户名不存在");
                    } else if ("密码错误" === data.msg){
                        $("#upawd").text("密码错误");
                    }else {
                        $("#user_messge").text(data.msg);
                    }
                    draw(show_num);
                }else {
                    //登录成功，保存用户的账号和密码到cookie，下次将自动登录，时间为7天，
                    if (names == null){
                        $.cookie("name", uname, { expires: 7, path: "/" });
                    }
                    if (pawds == null){
                        $.cookie("pawd", upawd, { expires: 7, path: "/" });
                    }

                    //根据用户角色做不同的界面跳转
                    if(data.result.userLevel === "0"){
                        location.href = "${pageContext.request.contextPath}/admin";
                    }else if (data.result.userLevel === "1" ) {
                        location.href = "${pageContext.request.contextPath}/teacher";
                    }else if (data.result.userLevel === "2") {
                        location.href = "${pageContext.request.contextPath}/user";
                    }else if (data.result.userLevel === "3") {
                        location.href = "${pageContext.request.contextPath}/college";
                    }else if (data.result.userLevel === "4") {
                        location.href = "${pageContext.request.contextPath}/school";
                    }else if (data.result.userLevel === "5") {
                        location.href = "${pageContext.request.contextPath}/doorkeeper";
                    }

                    sessionStorage.setItem("user",JSON.stringify(data));
                }

            },
            error:function(xhr,state,errorThrown){
                //alert("发生网络错误，错误码为：" + xhr.status)
                location.href = "${pageContext.request.contextPath}/error";
            }
        });
    }

    function hideShowPsw(){
        var type = $("#user_password").attr("type");
        if ("password" === type){
            $("#user_password").attr("type","text");
            $("#show_hide").attr("src","approvalProcess/img/show_paswd.png");
        }else {
            $("#user_password").attr("type","password");
            $("#show_hide").attr("src","approvalProcess/img/hide_paswd.png");
        }
    }

</script>

</body>
</html>
</span>